// 数据上报页面
<template>
  <a-card>
    <a-form layout="inline" :model="formState">
      <a-form-item label="数据日期">
        <a-date-picker
          v-model:value="formState.dataTime"
          type="date"
          placeholder="请选择"
          class="item-content"
          style="width: 120px"
        />
      </a-form-item>
      <a-form-item label="创建人">
        <a-input v-model:value="formState.creator" placeholder="请输入" class="item-content" />
      </a-form-item>
      <a-form-item label="频度">
        <a-select
          v-model:value="formState.reportFrequency"
          allow-clear
          placeholder="请选择"
          class="item-content"
        >
          <a-select-option v-for="item in reportFrequencyList" :key="item" :value="item">{{
            item
          }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="状态">
        <a-select
          v-model:value="formState.status"
          allow-clear
          placeholder="请选择"
          class="item-content"
        >
          <a-select-option v-for="item in statusList" :key="item" :value="item">{{
            item
          }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="报表名称">
        <a-input v-model:value="formState.reportName" placeholder="请输入" class="item-content" />
      </a-form-item>
      <a-form-item label="报送时间">
        <a-date-picker
          v-model:value="formState.reportTime"
          type="date"
          placeholder="请选择"
          class="item-content"
        />
      </a-form-item>
      <a-form-item>
        <a-button style="color: white; background-color: #f50" @click="query">查询</a-button>
        <a-button style="margin-left: 10px; background-color: #ececec" @click="reset"
          >重置</a-button
        >
      </a-form-item>
    </a-form>

    <dynamic-table
      ref="tableRef"
      :row-key="(record) => record.serial"
      :dynamic-columns="columns"
      :get-list-func="getReportingData"
    >
      <template #status="{ record }">
        <span :style="{ color: record.status.color }">
          {{ '● ' + record.status.name }}
        </span>
      </template>
      <template #reportTemplate="{ record }">
        <div style="display: flex; align-items: center">
          <icon-font type="icon-excel" size="26"></icon-font>
          <a :href="record.reportTemplate" style="margin-left: 5px">下载</a>
        </div>
      </template>
    </dynamic-table>
  </a-card>
</template>

<script lang="ts">
  import { defineComponent, reactive, toRefs, ref, toRaw, UnwrapRef } from 'vue'
  import { DynamicTable } from '@/components/dynamic-table'
  import { IconFont } from '@/components/iconfont'
  import { columns } from './index.data'
  import { Button, Card, Form, Input, Select, DatePicker } from 'ant-design-vue'
  import { formatDate } from '@/utils/common'
  import { useReportStore } from '@/store/modules/report'
  import {
    convertFlowStatusChinese2Code,
    convertFlowStatusChinese2Color,
    convertFlowStatusCode2Chinese,
    convertReportFrequencyChinese2Code,
    convertReportFrequencyCode2Chinese,
    reportFrequencyList,
    statusList
  } from '@/views/data'

  interface FormState {
    creator: string
    reportName: string
    regulationDept: string | undefined
    reportFrequency: string | undefined
    status: string | undefined
    reportTime: string | null
    dataTime: string | null
    delivery: boolean
    type: string[]
    resource: string
    desc: string
  }
  export default defineComponent({
    name: 'Reporting',
    components: {
      DynamicTable,
      IconFont,
      [Card.name]: Card,
      [Button.name]: Button,
      [Form.name]: Form,
      [Form.Item.name]: Form.Item,
      [Input.name]: Input,
      [Select.name]: Select,
      ASelectOption: Select.Option,
      [DatePicker.name]: DatePicker
    },
    setup() {
      const report = useReportStore()

      const formState: UnwrapRef<FormState> = reactive({
        creator: '',
        reportName: '',
        regulationDept: undefined,
        reportFrequency: undefined,
        status: undefined,
        reportTime: null,
        dataTime: null,
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      })
      const initialFormState = Object.assign({}, toRaw(formState))
      const query = () => {
        console.log('submit!', toRaw(formState))
        tableRef.value.refreshTableData(formState)
      }
      const reset = () => {
        Object.assign(formState, initialFormState)
      }

      const tableRef = ref<any>(null)
      const state = reactive({
        tableLoading: false,
        reportFrequencyList: reportFrequencyList,
        statusList: statusList,
        baseUrl: import.meta.env.VITE_APP_API_URL
      })

      const getReportingData = async (params) => {
        interface Status {
          name: string
          color: string
        }
        interface DataItem {
          serial: number
          reportNumber: string
          reportName: string
          reportFrequency: string
          status: Status
          reportTemplate: string
          dirStatementId: string
          dirId: string
          reportTime: string | null
          dataTime: string | null
          creator: string
        }
        const ps = {
          pageSize: params.pageSize,
          currentPage: params.pageNumber,
          dirPeriodDate: formatDate(formState.dataTime),
          dirCreatebyName: formState.creator,
          dirFrequentness: convertReportFrequencyChinese2Code(formState.reportFrequency),
          dirFlowStatus: convertFlowStatusChinese2Code(formState.status),
          dirName: formState.reportName,
          dirPushDate: formatDate(formState.reportTime)
        }
        const res = await report.getReportingList(ps)
        const data: DataItem[] = []
        const list = res.data
        for (let i = 0; i < list.length; i++) {
          const obj: DataItem = {
            serial: i,
            reportNumber: list[i].dirNumber,
            reportName: list[i].dirName,
            reportFrequency: convertReportFrequencyCode2Chinese(list[i].dirFrequentness),
            status: {
              name: convertFlowStatusCode2Chinese(list[i].dirFlowStatus.toString()),
              color: ''
            },
            reportTemplate: list[i].dirTemplate,
            creator: list[i].dirFillinOrgName,
            reportTime: list[i].dirPushDate,
            dirId: list[i].dirId,
            dirStatementId: list[i].dirStatementId,
            dataTime: list[i].dirPeriodDate
          }
          obj.status.color = convertFlowStatusChinese2Color(obj.status.name)
          data.push(obj)
        }
        return {
          data: data,
          pageNumber: res.currentPage,
          pageSize: res.pageSize,
          total: res.totalRows
        }
      }

      return {
        ...toRefs(state),
        columns,
        tableRef,
        getReportingData,
        formState,
        query,
        reset
      }
    }
  })
</script>

<style lang="scss" scoped>
  .item-content {
    width: 120px;
    margin-bottom: 20px;
  }
</style>
